<template>
  <div>
    <!-- 头部区域开始 -->
    <div style="height: 60px; display: flex;">
      <div style="width: 240px; display: flex; align-items: center; padding-left: 20px; background-color: #f5f5f5">
        <img style="width: 40px; height: 40px; border-radius: 50%" src="@/assets/imgs/logo.png" alt="">
        <span style="font-size: 20px; font-weight: bold; color: #0050ff; margin-left: 5px">投胎技巧</span>
      </div>
      <div style="flex: 1; display: flex; align-items: center; padding-left: 20px; border-bottom: 1px solid #ddd">
        <span style="margin-right: 5px; cursor: pointer" @click="router.push('/manager/home')">首页</span>> / <span style="margin-left: 5px">{{ router.currentRoute.value.meta.name }}</span>
      </div>
      <div style="width: fit-content; padding-right: 20px; display: flex; align-items: center; border-bottom: 1px solid #ddd">
        <el-dropdown>
          <div style="display: flex; align-items: center;">
            <img v-if="data.user?.avatar" style="width: 40px; height: 40px; border-radius: 50%" :src="data.user?.avatar" />
            <img v-else style="width: 40px; height: 40px; border-radius: 50%" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="">
            <span style="margin-left: 5px">{{ data.user?.name }}</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <!-- 头部区域结束 -->

    <!-- 主体区域开始 -->
    <div style="display: flex">
      <!-- 菜单区域开始 -->
      <div style="width: 240px; box-shadow: 0 0 8px rgba(0, 0, 0, .12);">
        <el-menu router :default-openeds="['1']" :default-active="router.currentRoute.value.path" style="min-height: calc(100vh - 60px)">
          <el-menu-item index="/manager/home">
            <el-icon><House /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><location /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/manager/admin">管理员信息</el-menu-item>
            <el-menu-item index="/manager/user">用户信息</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <!-- 菜单区域结束 -->
      <!-- 数据渲染区域开始 -->
      <div style="flex: 1; width: 0; padding: 10px; background-color: #f5f5f5">
        <RouterView />
      </div>
      <!-- 数据渲染区域结束 -->
    </div>
    <!-- 主体区域结束 -->

  </div>
</template>

<script setup>
import router from "@/router/index.js";
import { reactive } from "vue";

const data = reactive({
  user: JSON.parse(localStorage.getItem('code_user') || "{}")
})

const logout = () => {
  localStorage.removeItem('code_user')
  location.href = '/login'
}

// 检查缓存是否有用户信息，没有则返回登录界面，但仍有漏洞，可在 F12检查 -> 应用 -> 自定义键值对可以越过此检查
// if (!data.user?.id) {
//   location.href = '/login'
// }
// 相当于前端页面版的登录检查，防止直接输入域名进入页面
// let userStr = localStorage.getItem('code_user')
// if (userStr) {
//   let user = JSON.parse(userStr)
//   if (!user.id) {
//     location.href = '/login'
//   }
// } else {
//   location.href = '/login'
// }
</script>

<style>

  .el-menu {
    background-color: #e3e3e3;
    border: none;
  }

  .el-sub-menu__title {
    background-color: #e3e3e3;
    color: #000
  }

  .el-menu-item {
    height: 50px;
    color: #000
  }

  .el-menu .is-active {
    background-color: #676767;
    color: #000
  }

  .el-sub-menu__title:hover {
    background-color: #e3e3e3;
  }

  .el-menu-item:not(.is-active):hover {
    background-color: #676767;
    color: #000;
  }

  .el-dropdown {
    cursor: pointer;
  }

  .el-tooltip__trigger {
    outline: none;
  }

  .el-menu--inline .el-menu-item {
    padding-left: 50px !important;
  }

</style>